<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <div>
            <span>姓：</span>
            <span>
        <input type="text" v-model='firstName'>
      </span>
        </div>
        <div>
            <span>名：</span>
            <span>
        <input type="text" v-model='lastName'>
      </span>
        </div>
        <div> 全名: {{fullName}}</div>


    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                firstName:'爱新觉罗',
                lastName:"张三疯",
                fullName:''
            },

            methods:{},
            computed:{
                // fullName() {
                //     return this.firstName+this.lastName
                // }
            },

            // 当需要在数据变化时执行异步或开销较大的操作时，watch 这个方式是最有用的。
            watch:{
            //     fullName:function('新值','旧值') {

            // }

            firstName:function(newVal,oldVal) {
                console.log('newVal',newVal);
                console.log("oldVal",oldVal);
                this.fullName=newVal+this.lastName
                

            },

            lastName:function(newVal,oldVal) {
                this.fullName=this.firstName+newVal
                

            },


            }



            
        })
    </script>
</body>

</html>